<template>
  <div class="weather-forecast">
    <div class="forecast-item" v-for="(forecast, index) in forecasts" :key="index">
      <div class="date">{{ forecast.date }}</div>
      <div class="icon"><img :src="forecast.icon" /></div>
      <div class="temp">{{ forecast.temp }}°C</div>
      <div class="condition">{{ forecast.condition }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BottomDay',
  data() {
    return {
      forecasts: [
        { date: '周一', icon: require('@/components/datav/img/晴天.png'), temp: '20 ~ 30', condition: '晴天' },
        { date: '周二', icon: require('@/components/datav/img/阴天.png'), temp: '18 ~ 25', condition: '阴天' },
        { date: '周三', icon: require('@/components/datav/img/多云.png'), temp: '20 ~ 26', condition: '多云' },
        { date: '周四', icon: require('@/components/datav/img/雷阵雨.png'), temp: '15 ~ 19', condition: '雷阵雨' }
      ]
    };
  }
};
</script>

<style scoped>
.weather-forecast {
  width: 300px; /* 固定宽度 */
  height: 100px; /* 固定高度 */
  border-radius: 8px; /* 圆角 */
  padding: 10px; /* 内边距 */
}

.forecast-item {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 子项之间留出空间 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 8px; /* 下边距 */
}

.icon img {
  width: 25px; /* 图标宽度 */
  height: 23px; /* 图标高度 */
}

.temp {
  font-size: 16px; /* 温度字体大小 */
}

.condition {
  font-size: 15px; /* 天气条件字体大小 */
  color: #b8aaaa; /* 条件字体颜色 */
}
</style>
